<header>
    选择器查询手册
</header>
<h2>
    列表
</h2>
<table>
    <thead>
        <tr>
            <th>选择器</th>
            <th>例子</th>
            <th>例子描述</th>
            <th>CSS</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                .<i>class</i>
            </td>
            <td>.intro</td>
            <td>选择 class="intro" 的所有元素。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                #<i>id</i>
            </td>
            <td>#firstname</td>
            <td>选择 id="firstname" 的所有元素。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                *
            </td>
            <td>*</td>
            <td>选择所有元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <i>element</i>
            </td>
            <td>p</td>
            <td>选择所有 &lt;p&gt; 元素。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                <i>element</i>,
                <i>element</i>
            </td>
            <td>div,p</td>
            <td>选择所有 &lt;div&gt; 元素和所有 &lt;p&gt; 元素。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                <i>element</i>
                <i>element</i>
            </td>
            <td>div p</td>
            <td>选择 &lt;div&gt; 元素内部的所有 &lt;p&gt; 元素。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                <i>element</i>&gt;
                <i>element</i>
            </td>
            <td>div&gt;p</td>
            <td>选择父元素为 &lt;div&gt; 元素的所有 &lt;p&gt; 元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                <i>element</i>+
                <i>element</i>
            </td>
            <td>div+p</td>
            <td>选择紧接在 &lt;div&gt; 元素之后的所有 &lt;p&gt; 元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                [<i>attribute</i>]
            </td>
            <td>[target]</td>
            <td>选择带有 target 属性所有元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>
                =
                <i>value</i>
                ]
            </td>
            <td>[target=_blank]</td>
            <td>选择 target="_blank" 的所有元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>
                ~=
                <i>value</i>
                ]
            </td>
            <td>[title~=flower]</td>
            <td>选择 title 属性包含单词 "flower" 的所有元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>
                |=
                <i>value</i>
                ]
            </td>
            <td>[lang|=en]</td>
            <td>选择 lang 属性值以 "en" 开头的所有元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                :link
            </td>
            <td>a:link</td>
            <td>选择所有未被访问的链接。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :visited
            </td>
            <td>a:visited</td>
            <td>选择所有已被访问的链接。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :active
            </td>
            <td>a:active</td>
            <td>选择活动链接。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :hover
            </td>
            <td>a:hover</td>
            <td>选择鼠标指针位于其上的链接。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :focus
            </td>
            <td>input:focus</td>
            <td>选择获得焦点的 input 元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                :focus-within
            </td>
            <td>div:focus-within</td>
            <td>选择自己或其后代获得焦点的 div 元素。</td>
            <td></td>
        </tr>
        <tr>
            <td>
                :first-letter
            </td>
            <td>p:first-letter</td>
            <td>选择每个 &lt;p&gt; 元素的首字母。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :first-line
            </td>
            <td>p:first-line</td>
            <td>选择每个 &lt;p&gt; 元素的首行。</td>
            <td>1</td>
        </tr>
        <tr>
            <td>
                :first-child
            </td>
            <td>p:first-child</td>
            <td>选择属于父元素的第一个子元素的每个 &lt;p&gt; 元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                :before
            </td>
            <td>p:before</td>
            <td>在每个 &lt;p&gt; 元素的内容之前插入内容。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                :after
            </td>
            <td>p:after</td>
            <td>在每个 &lt;p&gt; 元素的内容之后插入内容。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>
                :lang(
                <i>language</i>)
            </td>
            <td>p:lang(it)</td>
            <td>选择带有以 "it" 开头的 lang 属性值的每个 &lt;p&gt; 元素。</td>
            <td>2</td>
        </tr>
        <tr>
            <td>

                <i>element1</i>~
                <i>element2</i>

            </td>
            <td>p~ul</td>
            <td>选择前面有 &lt;p&gt; 元素的每个 &lt;ul&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>^=
                <i>value</i>]
            </td>
            <td>a[src^="https"]</td>
            <td>选择其 src 属性值以 "https" 开头的每个 &lt;a&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>$=
                <i>value</i>]
            </td>
            <td>a[src$=".pdf"]</td>
            <td>选择其 src 属性以 ".pdf" 结尾的所有 &lt;a&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                [
                <i>attribute</i>*=
                <i>value</i>]
            </td>
            <td>a[src*="abc"]</td>
            <td>选择其 src 属性中包含 "abc" 子串的每个 &lt;a&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :first-of-type
            </td>
            <td>p:first-of-type</td>
            <td>选择属于其父元素的首个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :last-of-type
            </td>
            <td>p:last-of-type</td>
            <td>选择属于其父元素的最后 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :only-of-type
            </td>
            <td>p:only-of-type</td>
            <td>选择属于其父元素唯一的 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :only-child
            </td>
            <td>p:only-child</td>
            <td>选择属于其父元素的唯一子元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :nth-child(
                <i>n</i>)
            </td>
            <td>p:nth-child(2)</td>
            <td>选择属于其父元素的第二个子元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :nth-last-child(
                <i>n</i>)
            </td>
            <td>p:nth-last-child(2)</td>
            <td>同上，从最后一个子元素开始计数。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :nth-of-type(
                <i>n</i>)
            </td>
            <td>p:nth-of-type(2)</td>
            <td>选择属于其父元素第二个 &lt;p&gt; 元素的每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :nth-last-of-type(
                <i>n</i>)
            </td>
            <td>p:nth-last-of-type(2)</td>
            <td>同上，但是从最后一个子元素开始计数。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :last-child
            </td>
            <td>p:last-child</td>
            <td>选择属于其父元素最后一个子元素每个 &lt;p&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :root
            </td>
            <td>:root</td>
            <td>选择文档的根元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :empty
            </td>
            <td>p:empty</td>
            <td>选择没有子元素的每个 &lt;p&gt; 元素（包括文本节点）。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :target
            </td>
            <td>#news:target</td>
            <td>选择当前活动的 #news 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :enabled
            </td>
            <td>input:enabled</td>
            <td>选择每个启用的 &lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :disabled
            </td>
            <td>input:disabled</td>
            <td>选择每个禁用的 &lt;input&gt; 元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :checked
            </td>
            <td>input:checked</td>
            <td>选择每个被选中的 &lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :not(
                <i>selector</i>)
            </td>
            <td>:not(p)</td>
            <td>选择非 &lt;p&gt; 元素的每个元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :has(
                <i>selector</i>)
            </td>
            <td>:span:has(>i)</td>
            <td>选择有孩子 &lt;i&gt; 元素的&lt;span&gt;元素。</td>
            <td></td>
        </tr>
        <tr>
            <td>
                ::selection
            </td>
            <td>::selection</td>
            <td>选择被用户选取的元素部分。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :out-of-range
            </td>
            <td>input:out-of-range</td>
            <td>匹配值在指定区间之外的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :in-range
            </td>
            <td>input:in-range</td>
            <td>匹配值在指定区间之内的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :read-write
            </td>
            <td>input:read-write</td>
            <td>用于匹配可读及可写的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :read-only
            </td>
            <td>input:read-only</td>
            <td>用于匹配设置 "readonly"（只读） 属性的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :optional
            </td>
            <td>input:optional</td>
            <td>用于匹配可选的&lt;input&gt; 元素（也就是非必输）。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :required
            </td>
            <td>input:required</td>
            <td>用于匹配设置了 "required" 属性的&lt;input&gt; 元素</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :valid
            </td>
            <td>input:valid</td>
            <td>用于匹配输入值为合法的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
        <tr>
            <td>
                :invalid
            </td>
            <td>input:invalid</td>
            <td>用于匹配输入值为非法的&lt;input&gt; 元素。</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<h2>
    举例子
</h2>
<p>
    下面，我们将对一些可能不那么直观理解的进行举例子说明。
</p>
<h3>
    :out-of-range
</h3>
<p>
    如果输入的值不在5～10之间，将被选中标记为红色边框：
</p>
<pre tag="html">
<style>
    input:out-of-range
    {
        border:2px solid red;
    }
</style>
<input type="number" min="5" max="10" value="17" />
</pre>
<button tag="selector_out-of-range">查看用例</button>
<h3>
    :has
</h3>
<p>
    如果我们有三个输入框，其中输入框结构如下：
</p>
<pre tag="html">
<div>
    <label for="name">姓名</label>
    <input required type="text" id="name">
</div>
</pre>
<p>
    如果我们希望只有输入框的设置必选<span class="warn">required</span>才需要标记红星，那么可以：
</p>
<pre tag="css">
label:has(+[required])::before {
    content: "*";
    color: red;
}
</pre>
<button tag="selector_has">查看用例</button>